<template>
  <div class="body">
    <div class="mid">
      <div v-for="o in dispatchList" :key="o.id">
        <el-card class="box-card" style="margin-top: 30px">
          <div slot="header" class="clearfix">
            <span style="font-size: 24px; font-weight: bold">发货单</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="printContent"
              >打印发货单</el-button
            >
          </div>
          <el-row style="margin-bottom: 10px">
            <el-col :span="14"> 订单信息 </el-col>
            <el-col :span="6" :offset="4">
              订单号：<span style="font-size: 10px">{{ o.order.id }}</span>
            </el-col>
          </el-row>
          <!-- <div v-for="orderDetail in o.orderDetails" :key="orderDetail.id"> -->
          <!-- {{ orderDetail }} -->
          <el-table :data="o.orderDetails" stripe style="width: 100%">
            <el-table-column prop="" label="商品编号" width="180">
              <template slot-scope="scope">
                {{ scope.row.productId }}
              </template>
              <!-- {{ orderDetail.productId }} -->
            </el-table-column>
            <el-table-column prop="" label="商品名称" width="180">
              <template slot-scope="scope">
                {{ scope.row.productName }}
              </template>
            </el-table-column>
            <el-table-column prop="" label="单价">
              <template slot-scope="scope">
                {{ scope.row.productPrice }}
              </template>
            </el-table-column>
            <el-table-column prop="" label="数量">
              <template slot-scope="scope">
                                    {{ scope.row.buyNum }}                
              </template>
            </el-table-column>
            <el-table-column prop="" label="小计">
              <template slot-scope="scope">
                {{ calc(scope.row.buyNum, scope.row.productPrice) }}
              </template>
            </el-table-column>
          </el-table>
          <!-- </div> -->
          <el-row style="margin-top: 25px; font-size: 15px">
            <el-col :offset="17" :span="10">
              商品总价：{{
                o.order.actualAmount
              }}
              &nbsp;&nbsp;&nbsp;&nbsp;支付方式：{{
                showPayMethod(o.order.paymentId)
              }}
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="6">
              <div class="addr-common">收货人：{{ o.addrDTO.addressName }}</div>
              <div class="addr-common">手机号：{{ o.addrDTO.addressTel }}</div>
              <div class="addr-common">
                收货地址：{{ o.addrDTO.province }}{{ o.addrDTO.city
                }}{{ o.addrDTO.county }}{{ o.addrDTO.detail }}
              </div>
            </el-col>
            <!--  <el-col :offset="12" :span="5"> code </el-col> -->
          </el-row>
        </el-card>
      </div>

      <el-row>
        <el-col :span="1" :offset="22" style="padding: 20px">
          <el-button type="success" plain @click="back">返回</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.orderList = this.$route.query.data;
    this.handleDispatchList();
  },
  data() {
    return {
      orderList: [],
      tableData: [],
      dispatchList: [],
    };
  },
  methods: {
    showPayMethod(id) {
      if (id == 1) {
        return "支付宝";
      } else if (id == 2) {
        return "微信";
      }
    },
    calc(num, price) {
      return num * price;
    },
    back() {
      //console.log(this.dispatchList);
      this.$router.push({ path: "/orderManage" });
    },
    handleDispatchList() {
      this.orderList.forEach((e) => {
        this.$axios
          .get("api/scss-server/handleDispatchList", {
            params: { orderId: e.id },
          })
          .then((response) => {
            if (response.data.code == 200) {
              this.dispatchList.push(response.data.data);
            }
          });
      });
    },
    printContent() {
      window.print();
    },
  },
};
</script>

<style scoped>
.addr-common {
  font-size: 12px;
  margin-top: 10px;
}
.mid {
  background-color: #fff;
  width: 1200px;
  margin: 0 auto;
}
</style>
